<script>
import axios from "axios";
import {getBaseUrl} from "@/js/common.js";
import {getToken} from "@/js/userUtils.js";
import {toHomeContent} from "@/js/blogUtils.js";
import MyBlogPage from "@/components/user/MyBlogPage.vue";
import MyPictureBed from "@/components/user/MyPictureBed.vue";
import MyBinPage from "@/components/user/MyBinPage.vue";

export default {
  name: "UserView",
  components: {MyBinPage, MyPictureBed, MyBlogPage},
  data() {
    return {
      user: null,
      activeIndex: '1'
    }
  },
  created() {
    this.getCurentUser()
  },
  methods: {
    toHomeContent,
    getCurentUser(){
      axios.get(getBaseUrl('userCenter') + '/user/getCurrentUser',{headers: {'massToken': getToken()}}).then(res => {
        if (res.data && res.data.code === 200) {
          this.user = res.data.data
        }else {
          console.log('获取用户信息失败')
          this.$router.push('/')
        }
      }).catch(() => {
        console.log('获取用户信息失败')
        this.$router.push('/')
      })
    },
    handleSelect(key, keyPath){
      this.activeIndex = key
    }
  }
}
</script>

<template>
  <div>
    <el-container>
      <el-header height="30%" class="user-header">
        <el-row style="height: 100%">
          <el-col span="12" class="user-header-back">
            <el-page-header @back="toHomeContent()" icon="">
              <template #title>
                <span> 返回首页 </span>
              </template>
              <template #content>
                <span> {{user ? user.userName : ''}} </span>
              </template>
            </el-page-header>
          </el-col>
          <el-col class="user-header-avatar" span="12">
            <el-avatar size="default" :src="user ? user.picture : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="user-aside-menu"
            @select="handleSelect"
          >
            <el-menu-item index="1" class="user-aside-menu-item">
              <el-icon><EditPen /></el-icon>
              <span>我的创建</span>
            </el-menu-item>
            <el-menu-item index="2" class="user-aside-menu-item">
              <el-icon><Star /></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item index="4" class="user-aside-menu-item">
              <el-icon><DeleteFilled /></el-icon>
              <span>回收站</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <MyBlogPage v-if="activeIndex === '1'" />
          <MyPictureBed v-if="activeIndex === '3'" />
          <MyBinPage v-if="activeIndex === '4'" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.user-header{
  border-bottom: 1px var(--el-border-color) solid;
  height: 60px;
}
.user-header-back{
  display: flex;
  justify-content: left;
  align-items: center;
  height: 100%;
  width: 20%;
}
.user-header-avatar{
  display: flex;
  justify-content: right;
  align-items: center;
  height: 100%;
  width: 79%;
}
.user-aside-menu{
  border-right: white;
  margin-top: 30px;
}
.user-aside-menu .user-aside-menu-item{
  border-radius: 20px
}
</style>
